<template>
  <div class="apply-dialog">
    <div v-if="thisDiv === 1 || thisDiv === 2">
      <div class="title" style="display: flex;">
        <div style="flex: 1; text-align: left;padding-left: 30px;font-size: 25px;">
          {{ models.eventName }}
        </div>
        <div class="btn-list flex flex-row align-center">
          <el-button type="warning" size="mini" :loading="saveLoading" @click="saveAction">暂存</el-button>
          <el-button type="primary" size="mini" :loading="submitLoading" @click="submitAction">上报</el-button>
          <el-button type="info" size="mini" @click="handleClose">返回</el-button>
        </div>
      </div>
      <el-form
        ref="generateForm"
        label-suffix=":"
        size="small"
        :model="models"
        :rules="rules"
        label-position="right"
        label-width="130px"
      >
        <div >
          <title-info title="上报⼈信息" >
            <reporter-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事人信息" >
            <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事患者信息" >
            <patient-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="事件信息" >
            <event-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="员⼯针刺伤情况" >
            <div slot="left" style="display: flex; width: 100%; flex-wrap: wrap; ">
              <el-form-item label="被刺物" prop="backstabObjectArr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.backstabObjectArr">
                    <el-checkbox v-for="(item, index) in backstabObjectList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                    <el-input
                      v-if="models.backstabObjectArr && models.backstabObjectArr.indexOf('533')  > -1"
                      :style="{ width: '200px', 'margin-left': '5px' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordProtection.backstabObjectOther"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <el-form-item label="污染" prop="baqsjRecordProtection.backstabObjectPolluted">
                <el-radio-group v-model="models.baqsjRecordProtection.backstabObjectPolluted">
                  <el-radio v-for="(item, index) in backstabObjectPollutedList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="其他意外伤害" prop="baqsjRecordProtection.otherHurt">
                <el-input
                  :style="{ width: '400px' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordProtection.otherHurt"
                />
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="操作类型" prop="operationTypeArr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.operationTypeArr">
                    <el-checkbox v-for="(item, index) in operationTypeList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                    <el-input
                      v-if="models.operationTypeArr && models.operationTypeArr.indexOf('545')  > -1"
                      :style="{ width: '200px', 'margin-left': '5px' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordProtection.operationTypeOther"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="受伤操作" prop="baqsjRecordProtection.hurtOperation">
                <el-radio-group v-model="models.baqsjRecordProtection.hurtOperation">
                  <el-radio v-for="(item, index) in hurtOperationList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="受伤部位1" prop="hurtPart1Arr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.hurtPart1Arr">
                    <el-checkbox v-for="(item, index) in hurtPart1List" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                    <el-input
                      v-if="models.hurtPart1Arr && models.hurtPart1Arr.indexOf('5656')  > -1"
                      :style="{ width: '200px', 'margin-left': '5px' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordProtection.hurtPart1Other"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="受伤部位2" prop="hurtPart1Arr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.hurtPart2Arr">
                    <el-checkbox v-for="(item, index) in hurtPart2List" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                    <el-input
                      v-if="models.hurtPart2Arr && models.hurtPart2Arr.indexOf('5756')  > -1"
                      :style="{ width: '200px', 'margin-left': '5px' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordProtection.hurtPart2Other"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="受伤部位3" prop="hurtPart3Arr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.hurtPart3Arr">
                    <el-checkbox v-for="(item, index) in hurtPart3List" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="受伤程度" prop="hurtPartDegreeArr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.hurtPartDegreeArr">
                    <el-checkbox v-for="(item, index) in hurtPartDegreeList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </div>
          </title-info>
        </div>
        <div >
          <title-info title="处理措施" >
            <div slot="left">
              <div style="display: flex; width: 100%; flex-wrap: wrap; ">
                <el-form-item label="流⽔冲洗(时间)" prop="flushTime" label-width="130px" style="flex: 1;">
                  <el-date-picker
                    :style="{ width: '300px' }"
                    v-model="models.baqsjRecordProtection.flushTime"
                    type="datetime"
                    clearable
                    placeholder="选择日期时间"
                  />
                </el-form-item>
                <el-form-item label="涂消毒液(药品)" prop="disinfectantName" label-width="130px"  style="flex: 1;">
                  <el-input
                    :style="{ width: '300px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordProtection.disinfectantName"
                  />
                </el-form-item>
                <div style="flex: 1;" />
              </div>
              <div style="display: flex; width: 100%; flex-wrap: wrap; ">
                <el-form-item label="清创缝合" prop="debridementSuturing" label-width="130px" style="flex: 1;">
                  <el-input
                    :style="{ width: '300px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordProtection.debridementSuturing"
                  />
                </el-form-item>
                <el-form-item label="⽤药情况(药名)" prop="drugName" label-width="130px" style="flex: 1;">
                  <el-input
                    :style="{ width: '300px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordProtection.drugName"
                  />
                </el-form-item>
                <div style="flex: 1;" />
              </div>
              <div style="display: flex; width: 100%; flex-wrap: wrap; ">
                <el-form-item label="抽⾎化验(项⽬)" prop="inspectBloodName" label-width="130px" style="flex: 1;">
                  <el-input
                    :style="{ width: '300px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordProtection.inspectBloodName"
                  />
                </el-form-item>
                <el-form-item label="剂量" prop="drugMount" label-width="130px" style="flex: 1;">
                  <el-input
                    :style="{ width: '300px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordProtection.drugMount"
                  />
                </el-form-item>
                <div style="flex: 1;" />
              </div>
              <div style="display: flex; width: 100%; flex-wrap: wrap; ">
                <el-form-item label="随访时间1" label-width="130px" style="flex: 1;">
                  <el-date-picker
                    :style="{ width: '300px' }"
                    v-model="models.baqsjRecordProtection.visitTime1"
                    type="datetime"
                    clearable
                    placeholder="选择日期时间"
                  />
                </el-form-item>
                <el-form-item label="随访时间2" label-width="130px" style="flex: 1;">
                  <el-date-picker
                    :style="{ width: '300px' }"
                    v-model="models.baqsjRecordProtection.visitTime2"
                    type="datetime"
                    clearable
                    placeholder="选择日期时间"
                  />
                </el-form-item>
                <el-form-item label="随访时间3" label-width="130px" style="flex: 1;">
                  <el-date-picker
                    :style="{ width: '300px' }"
                    v-model="models.baqsjRecordProtection.visitTime3"
                    type="datetime"
                    clearable
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </div>
            </div>
          </title-info>
        </div>
        <div >
          <title-info title="病源" >
            <div slot="left">
              <el-form-item label="病⼈疾病诊断" prop="diseaseDiagose" label-width="180px" style="width: 100%">
                <el-input
                  :style="{ width: '70%' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordProtection.diseaseDiagose"
                />
              </el-form-item>

              <el-form-item label="病源微⽣物检测情况" prop="pathogenicMicroorganism" label-width="180px" style="width: 100%">
                <el-input
                  :style="{ width: '70%' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordProtection.pathogenicMicroorganism"
                />
              </el-form-item>

              <el-form-item label="不确定受伤来源" prop="hurtSource" label-width="180px" style="width: 100%">
                <el-radio-group v-model="models.baqsjRecordProtection.hurtSource">
                  <el-radio v-for="(item, index) in hurtSourceList" :key="index" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="叙述整起事件经过" prop="eventDescription" label-width="180px" style="width: 100%">
                <el-input
                  :style="{ width: '70%' }"
                  :rows="3"
                  type="textarea"
                  placeholder="请输入"
                  v-model="models.eventDescription"
                />
              </el-form-item>
            </div>
          </title-info>
        </div>
      </el-form>
    </div>
    <div v-if="thisDiv === 3">
      <div>
        <title-info title="上报⼈信息">
          <reporter-info slot="left" :form-data="models" :this-div="thisDiv" />
        </title-info>
      </div>
      <div>
        <title-info title="当事人信息">
          <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="当事患者信息">
          <patient-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="事件信息">
          <event-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="员⼯针刺伤情况">
          <div slot="left">
            <table>
              <tr>
                <td class="td-title">被刺物</td>
                <td>{{ getBackstabObjects(models.backstabObjectArr) || '' }}</td>
                <td class="td-title">污染</td>
                <td>{{ getBackstabObjectPollutedLabel(models.baqsjRecordProtection.backstabObjectPolluted) || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">其他意外伤害</td>
                <td>{{ models.baqsjRecordProtection.otherHurt || '' }}</td>
                <td class="td-title">操作类型</td>
                <td>{{ getOperationTypes(models.operationTypeArr) || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">受伤操作</td>
                <td>{{ getHurtOperationLabel(models.baqsjRecordProtection.hurtOperation) || '' }}</td>
                <td class="td-title">受伤部位1</td>
                <td>{{ getHurtParts1(models.hurtPart1Arr) || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">受伤部位2</td>
                <td>{{ getHurtParts2(models.hurtPart2Arr) || '' }}</td>
                <td class="td-title">受伤部位3</td>
                <td>{{ getHurtParts3(models.hurtPart3Arr) || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">受伤程度</td>
                <td>{{ getHurtPartDegrees(models.hurtPartDegreeArr) || '' }}</td>
              </tr>
            </table>
          </div>
        </title-info>
      </div>
      <div>
        <title-info title="处理措施">
          <div slot="left">
            <table>
              <tr>
                <td class="td-title">流⽔冲洗(时间)</td>
                <td>{{ models.baqsjRecordProtection.flushTime || '' }}</td>
                <td class="td-title">涂消毒液(药品)</td>
                <td>{{ models.baqsjRecordProtection.disinfectantName || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">清创缝合</td>
                <td>{{ models.baqsjRecordProtection.debridementSuturing || '' }}</td>
                <td class="td-title">⽤药情况(药名)</td>
                <td>{{ models.baqsjRecordProtection.drugName || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">抽⾎化验(项⽬)</td>
                <td>{{ models.baqsjRecordProtection.inspectBloodName || '' }}</td>
                <td class="td-title">剂量</td>
                <td>{{ models.baqsjRecordProtection.drugMount || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">随访时间1</td>
                <td>{{ models.baqsjRecordProtection.visitTime1 || '' }}</td>
                <td class="td-title">随访时间2</td>
                <td>{{ models.baqsjRecordProtection.visitTime2 || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">随访时间3</td>
                <td>{{ models.baqsjRecordProtection.visitTime3 || '' }}</td>
              </tr>
            </table>
          </div>
        </title-info>
      </div>
      <div>
        <title-info title="病源">
          <div slot="left">
            <table>
              <tr>
                <td class="td-title">病⼈疾病诊断</td>
                <td>{{ models.baqsjRecordProtection.diseaseDiagose || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">病源微⽣物检测情况</td>
                <td>{{ models.baqsjRecordProtection.pathogenicMicroorganism || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">不确定受伤来源</td>
                <td>{{ getHurtSourceLabel(models.baqsjRecordProtection.hurtSource) || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">叙述整起事件经过</td>
                <td>{{ models.eventDescription || '' }}</td>
              </tr>
            </table>
          </div>
        </title-info>
      </div>
    </div>
  </div>
</template>

<script>
import { doSavePreventionAndProtection } from '@/api/report/reportForm'

import titleInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/titleInfo.vue'
import reporterInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/reporterInfo.vue'
import partyInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/partyInfo.vue'
import patientInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/patientInfo.vue'
import eventInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/eventInfo.vue'

export default {
  name: 'PreventionAndProtection',
  components: { titleInfo, reporterInfo, partyInfo, patientInfo, eventInfo },
  data() {
    return {
      // 当前显示的div：1 dialog 2 详情 3 处置
      thisDiv: 0,
      models: {
        baqsjRecordProtection: {
          backstabObjectPolluted: '',
          hurtOperation: '',
          hurtSource: ''
        }
      },
      loading: false,
      dialogVisible: false,
      dialogDetailVisible: false,
      submitLoading: false,
      saveLoading: false,
      rules: {},
      backstabObjectList: [
        { value: '530', label: '针' },
        { value: '531', label: '⼑⽚' },
        { value: '532', label: '安瓿' },
        { value: '533', label: '其他' }
      ],
      backstabObjectPollutedList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' }
      ],
      operationTypeList: [
        { value: '540', label: '冲输液' },
        { value: '541', label: '注射' },
        { value: '542', label: '⼿术' },
        { value: '543', label: '穿刺' },
        { value: '544', label: '处理废弃物' },
        { value: '545', label: '其他' }
      ],
      hurtOperationList: [
        { value: '0', label: '操作前' },
        { value: '1', label: '操作后' }
      ],
      hurtPart1List: [
        { value: '5651', label: '左⼿' },
        { value: '5652', label: '拇指' },
        { value: '5653', label: '中指' },
        { value: '5654', label: '⽆名指' },
        { value: '5655', label: '⼩指' },
        { value: '5656', label: '其他' }
      ],
      hurtPart2List: [
        { value: '5751', label: '右⼿' },
        { value: '5752', label: '拇指' },
        { value: '5753', label: '中指' },
        { value: '5754', label: '⽆名指' },
        { value: '5755', label: '⼩指' },
        { value: '5756', label: '其他' }
      ],
      hurtPart3List: [
        { value: '5851', label: '黏膜' }
      ],
      hurtPartDegreeList: [
        { value: '570', label: '⽪肤' },
        { value: '571', label: '⾎管' },
        { value: '572', label: '肌腱' },
        { value: '573', label: '⾻' },
        { value: '574', label: '眼' }
      ],
      hurtSourceList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' }
      ]
    }
  },
  methods: {
    handleClose(val) {
      this.dialogVisible = false
      // 传到父组件
      this.$emit('close', val)
    },
    handleDetailClose() {
      this.dialogDetailVisible = false
    },
    getDetail(info) {
      this.models = {
        ...info,
        medicalInvolvedArr: (info.baqsjRecordHandle && info.baqsjRecordHandle.medicalInvolved) ? info.baqsjRecordHandle.medicalInvolved.split(',') : [],
        otherInvolvedArr: (info.baqsjRecordHandle && info.baqsjRecordHandle.otherInvolved) ? info.baqsjRecordHandle.otherInvolved.split(',') : [],
        backstabObjectArr: (info.baqsjRecordProtection && info.baqsjRecordProtection.backstabObject) ? info.baqsjRecordProtection.backstabObject.split(',') : [],
        operationTypeArr: (info.baqsjRecordProtection && info.baqsjRecordProtection.operationType) ? info.baqsjRecordProtection.operationType.split(',') : [],
        hurtPart1Arr: (info.baqsjRecordProtection && info.baqsjRecordProtection.hurtPart1) ? info.baqsjRecordProtection.hurtPart1.split(',') : [],
        hurtPart2Arr: (info.baqsjRecordProtection && info.baqsjRecordProtection.hurtPart2) ? info.baqsjRecordProtection.hurtPart2.split(',') : [],
        hurtPart3Arr: (info.baqsjRecordProtection && info.baqsjRecordProtection.hurtPart3) ? info.baqsjRecordProtection.hurtPart3.split(',') : [],
        hurtPartDegreeArr: (info.baqsjRecordProtection && info.baqsjRecordProtection.hurtPartDegree) ? info.baqsjRecordProtection.hurtPartDegree.split(',') : []
      };
      console.log(this.models);
    },
    editInfo(ruleInfo, info) {
      this.thisDiv = 2
      this.dialogVisible = true
      this.rules = ruleInfo
      this.getDetail(info)
    },
    detail(info) {
      this.thisDiv = 3
      this.dialogDetailVisible = true
      this.getDetail(info)
    },
    open(ruleInfo, modelInfo) {
      // 弹出框
      this.thisDiv = 1
      this.rules = {
        ...ruleInfo
      }
      this.models = {
        ...modelInfo,
        eventNo: 'PreventionAndProtection',
        eventName: '防保相关-职业暴露不良事件',
        // 其他复选框
        // 处理措施=>医疗介入
        medicalInvolvedArr: [],
        //  处理措施=>其他介入
        otherInvolvedArr: [],
        // 事件差错详情 => 对象类型(不同的表单，定制不同)
        baqsjRecordProtection: {
          backstabObjectPolluted: '',
          hurtOperation: '',
          hurtSource: ''
        },
        // 事件差错详情 =>  (不同的表单，定制不同)
        backstabObjectArr: [],
        operationTypeArr: [],
        hurtPartArr: [],
        hurtPart1Arr: [],
        hurtPart2Arr: [],
        hurtPart3Arr: [],
        hurtPartDegreeArr: []
      }
      this.dialogVisible = true
    },
    getBackstabObjects(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.backstabObjectList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '533') {
            labels.push(`其他（${this.models.baqsjRecordProtection.backstabObjectOther || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    getBackstabObjectPollutedLabel(value) {
      if (value === undefined || value === null) return '';
      const item = this.backstabObjectPollutedList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getOperationTypes(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.operationTypeList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '545') {
            labels.push(`其他（${this.models.baqsjRecordProtection.operationTypeOther || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    getHurtOperationLabel(value) {
      if (value === undefined || value === null) return '';
      const item = this.hurtOperationList.find(item => item.value === value);
      return item ? item.label : '';
    },
    getHurtParts1(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.hurtPart1List.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '5656') {
            labels.push(`其他（${this.models.baqsjRecordProtection.hurtPart1Other || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    getHurtParts2(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.hurtPart2List.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '5756') {
            labels.push(`其他（${this.models.baqsjRecordProtection.hurtPart2Other || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    getHurtParts3(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.hurtPart3List.forEach(item => {
        if (values.includes(item.value)) {
          labels.push(item.label);
        }
      });
      return labels.join(', ');
    },
    getHurtPartDegrees(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.hurtPartDegreeList.forEach(item => {
        if (values.includes(item.value)) {
          labels.push(item.label);
        }
      });
      return labels.join(', ');
    },
    getHurtSourceLabel(value) {
      if (value === undefined || value === null) return '';
      const item = this.hurtSourceList.find(item => item.value === value);
      return item ? item.label : '';
    },
    submitAction() {
      // 上报
      this.models.auditStatus = 2
      this.actionRequest()
    },
    saveAction(item) {
      // 草稿
      this.models.auditStatus = 1
      this.actionRequest()
    },
    actionRequest() {
      // 新增、编辑、暂存
      this.$refs['generateForm'].validate(valid => {
        if (valid) {
          this.$message({
            message: '正在操作请稍等...',
            type: 'warning'
          })
          this.saveLoading = true
          this.submitLoading = true

          // 处理复选框数据
          this.models.baqsjRecordProtection.backstabObject = this.models.backstabObjectArr.join(',');
          this.models.baqsjRecordProtection.operationType = this.models.operationTypeArr.join(',');
          this.models.baqsjRecordProtection.hurtPart1 = this.models.hurtPart1Arr.join(',');
          this.models.baqsjRecordProtection.hurtPart2 = this.models.hurtPart2Arr.join(',');
          this.models.baqsjRecordProtection.hurtPart3 = this.models.hurtPart3Arr.join(',');
          this.models.baqsjRecordProtection.hurtPartDegree = this.models.hurtPartDegreeArr.join(',');
          doSavePreventionAndProtection(this.models).then(res => {
            if (res.resStatus !== 500) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.saveLoading = false
              this.submitLoading = false
              // 关闭弹出框
              this.dialogVisible = false
              this.handleClose(1)
            } else {
              this.$message({
                type: 'error',
                message: '操作失败!'
              })
              this.saveLoading = false
              this.submitLoading = false
            }
          })
        } else {
          this.$message({
            message: '请填写必填项',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  position: sticky;
  top: 0;
  z-index: 2000;
  background-color: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
